<template>
  <div class="dashboard-container">
    <el-form :inline="true" :model="queryForm" class="demo-form-inline" style="margin-bottom:20px">
      <el-form-item label="日期">
        <el-date-picker v-model="queryForm.reportTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
          @change="getList">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="是否告警">
        <el-select v-model="queryForm.wornFlag" placeholder="请选择" @change="getList">
          <el-option label="全部" :value="2">
          </el-option>
          <el-option label="是" :value="1">
          </el-option>
          <el-option label="否" :value="0">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-button type="primary" @click="getList">查询</el-button> -->
    </el-form>

    <el-table :data="tableData" border>
      <el-table-column label="温度" min-width="100px" prop="temp"></el-table-column>
      <el-table-column label="湿度" min-width="100px" prop="humi"></el-table-column>
      <el-table-column label="是否告警" min-width="100px" prop="wornFlag">
        <template #default="scope">
          <span v-if="scope.row.wornFlag === '1'">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column label="告警原因" min-width="100px" prop="wornInfo"></el-table-column>
      <el-table-column label="创建时间" min-width="100px" prop="reportTime"></el-table-column>
    </el-table>

    <el-pagination v-if="total > 0" background :current-page="queryForm.pageNum"
      layout="total, sizes, prev, pager, next, jumper" :page-size="queryForm.pageSize" :total="total"
      @current-change="handleCurrentChange" @size-change="handleSizeChange" />
  </div>


</template>

<script>
import { getDiscussTopicListApi } from "@/api/monidata.js";
export default {
  name: "Dashboard",
  data() {
    return {
      tableData: [],
      queryForm: {
        wornFlag: 2,
        reportTime: "",
        queryPage: {
          pageNum: 1,
          pageSize: 10,
          isNeedPage: true,
        },
      },
      total: 0,
    };
  },
  mounted() {
    let date = new Date();
    let year = date.getFullYear();
    let month = (date.getMonth() + 1).toString().padStart(2, '0');
    let day = date.getDate().toString().padStart(2, '0');
    this.queryForm.reportTime = `${year}-${month}-${day}`;
    this.getList();
  },
  methods: {
    // 获取列表
    getList() {
      getDiscussTopicListApi({ ...this.queryForm }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data;
          this.total = res.page.total;
        }
      });
    },
    //每页条数发生变化时
    handleSizeChange(val) {
      this.queryForm.queryPage.pageSize = val;
      this.getList();
    },
    //页码发生变化时
    handleCurrentChange(val) {
      this.queryForm.queryPage.pageNum = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
